﻿@page "/adder"

@inject NavigationManager Navigation
@inject IJSRuntime JS

<link href="./lib/editor/dist/css/style.css" rel="stylesheet">
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }
    .ant-input-affix-wrapper {
        border:0px solid #d9d9d9 !important;
    }
</style>

<h1 @onclick="back" style="cursor:pointer;float:left"><Icon Type="left-circle" Theme="outline"  /> 记一记</h1>
<Button Type="@ButtonType.Text" style="float:right;margin-top:5px">保存</Button>
<div>
    <Input Placeholder="标题" AllowClear="true" OnChange="onChange" TValue="string" Size="@InputSize.Large" style="font-size:25px" />
    <br />
    <br />
    <TextArea Placeholder="内容" id="data" AllowClear="true" OnChange="onChange" Size="@InputSize.Large" style="display:none" />
    <div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
    </div>

    <style>
        #button-block-demo > * {
            margin-bottom: 12px;
        }
    </style>
    <script>
        debugger

        var E = window.wangEditor; // 全局变量
        window.editor = E.createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: {
                placeholder: 'Type here...',
                MENU_CONF: {
                    uploadImage: {
                        fieldName: 'your-fileName',
                        base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                    }
                },
                onChange(editor) {
                    //console.log(editor.getHtml())
                    //onChange(editor.getHtml())
                    //document.getElementById('data').innerText = editor.getHtml()
                    //document.getElementById('data').onchange();
                    DotNet.invokeMethodAsync('notepad.f', 'onChange', editor.getHtml());
                }
            }
        })

        window.toolbar = E.createToolbar({
            editor,
            selector: '#toolbar-container',
            config: {}
        })
    </script>
</div>

@code {

    public void back()
    {
        Navigation.NavigateTo("",false,true);
    }
}
